<template>
	<view class="pages u-flex-column">
		<view class="u-flex u-flex-x-center activity"
			:style="`backgroundImage:url(${$http_cos}/static/%E7%9E%AC%E9%97%B4%E5%A4%B4%E9%83%A8%E8%83%8C%E6%99%AF%20%281%29.png)`">
			<view class="u-flex">
				<image :src="`${$http_cos}/static/%E7%9E%AC%E9%97%B4%E5%A4%B4%E9%83%A8%E6%8F%92%E5%9B%BE.png`"
					mode="widthFix"></image>
				<view class="u-flex-column moment_text">
					<text>#活动组织 #幸福案例</text>
					<text>有趣活动/幸福案例分享给您</text>
				</view>
			</view>
			<view class="u-flex-column" v-if="isMatchmaker==1">
				<view @click="send_activity" class="heard_btn">
					<text>发布活动</text>
				</view>
				<view @click="send_case" class="heard_btn">
					<text>发送案例</text>
				</view>
			</view>
			<view v-else style="width:160rpx;height:66rpx;">

			</view>
		</view>
		<view class="content u-flex-column">
			<u-tabs :list="tab_list" @click="click" :current="current" :itemStyle="{height:'85rpx'}" lineColor="#FF7612"
				lineWidth="40" lineHeight="6" :activeStyle="{color:'#FF7612'}"></u-tabs>
			<view class="main">
				<swiper class="scroll-view-height" @change="swipeIndex" :current="current" :duration="300">
					<swiper-item>
						<scroll-view scroll-y="true" @scrolltolower="onReachBottoms"
							class="scroll-view-height list-content">
							<!-- <view class="activity_item" v-for="(item,index) in tab_list[current].array" :key="index"
								v-if="current==0">
								<view class="activity_image">
									<image :src="item.cover" mode="aspectFill"></image>
								</view>
								<view class="activity_item_bottom">
									<view class="title">
										<text>{{item.name}}</text>
									</view>
									<view class="u-flex u-flex-between participation_warp">
										<view class="participation_warp_left u-flex-between u-flex-column">
											<text>时间：{{result(item.time,'datetime')}}</text>
											<text>地点：{{item.address}}</text>
										</view>
										<view class="btn participation u-flex-xy-center" v-if="item.status==0"
											@click="look_active(item)">
											<text>查看活动</text>
										</view>
										<view class="btn finish u-flex-xy-center" v-if="item.status==1">
											<text>已经结束</text>
										</view>
									</view>
								</view>
							</view> -->
							<view v-for="(item,index) in tab_list[current].array" :key="index" class="case_item"
								v-if="current==0">
								<view class="u-flex-between u-flex-y-center">
									<view class="u-flex-y-center">
										<image :src="item.matchUserInfo.headimgurl" class="heard"
											v-if="item.matchUserInfo"></image>
										<view class="u-flex-column moment_title">
											<view class="u-flex">
												<text v-if='item.matchUserInfo'>{{item.matchUserInfo.nickname}}</text>
												<text>@{{item.matchmakerUid}}</text>
											</view>
											<text>{{item.createdAt}}</text>
										</view>
									</view>
									<view class="u-flex-y-center">
										<view class="delate" @click="delate_active(item)" v-if="isMatchmaker==1">
											<image :src="`${$http_cos}/static/%E5%88%A0%E9%99%A4.png`"></image>
										</view>
										<view class="delate" @click="look_active(item)" v-if="isMatchmaker==1">
											<image :src="`${$http_cos}/static/%E7%BC%96%E8%BE%91.png`"></image>
										</view>
									</view>
								</view>
								<view style="padding-bottom: 32rpx;box-sizing: border-box;">
									<text>{{item.name}}</text>
								</view>

								<view class="u-flex u-flex-wrap photos" v-if="item.moment!=''">
									<u-album :urls="get_srcs(item.moment)" keyName="url" multipleSize="205"
										singleSize="205" singleMode="widthFix" space="15">
									</u-album>
								</view>
							</view>
							<u-empty v-if="tab_list[current].array.length==0" textSize='30' mode="data" width="200"
								height="200"
								icon="https://hl-1316403513.cos.ap-shanghai.myqcloud.com/static/%E6%95%B0%E6%8D%AE%E4%B8%BA%E7%A9%BA.png">
							</u-empty>
						</scroll-view>
					</swiper-item>
					<swiper-item>
						<scroll-view scroll-y="true" @scrolltolower="onReachBottoms"
							class="scroll-view-height list-content">
							<view v-for="(item,index) in tab_list[current].array" :key="index" class="case_item"
								v-if="current==1">
								<view class="u-flex-between u-flex-y-center">
									<view class="u-flex-y-center">
										<image :src="item.matchUserInfo.headimgurl" class="heard"
											v-if="item.matchUserInfo"></image>
										<view class="u-flex-column moment_title">
											<view class="u-flex">
												<text v-if='item.matchUserInfo'>{{item.matchUserInfo.nickname}}</text>
												<text>@{{item.matchmakerUid}}</text>
											</view>
											<text>{{item.createdAt}}</text>
										</view>
									</view>
									<view class="delate" @click="delate(item)" v-if="isMatchmaker==1">
										<image :src="`${$http_cos}/static/%E5%88%A0%E9%99%A4.png`"></image>
									</view>
								</view>
								<view style="padding-bottom: 32rpx;box-sizing: border-box;">
									<text>{{item.title}}</text>
								</view>

								<view class="u-flex u-flex-wrap photos">
									<u-album :urls="get_srcs(item.images)" keyName="url" multipleSize="205"
										singleSize="205" singleMode="widthFix" space="15">
									</u-album>
								</view>
							</view>
							<u-empty v-if="tab_list[current].array.length==0" textSize='30' mode="data" width="200"
								height="200"
								icon="https://hl-1316403513.cos.ap-shanghai.myqcloud.com/static/%E6%95%B0%E6%8D%AE%E4%B8%BA%E7%A9%BA.png">
							</u-empty>
						</scroll-view>
					</swiper-item>

				</swiper>

			</view>

		</view>
	</view>
</template>

<script>
	import {
		delCase,
		getActivityList,
		getCaseList,
		delActivity
	} from '@/common/api.js'

	const app = getApp();
	export default {
		data() {
			return {
				current: 0,
				isMatchmaker: 0,
				$http_cos: app.$http_cos,
				count: 0,
				count1: 0,
				tab_list: [{
					name: '活动组织',
					array: [],
					count: 0,
					formData: {
						page: 1,
						perPage: 10
					},
				}, {
					name: '幸福案例',
					array: [],
					count: 0,
					formData: {
						page: 1,
						perPage: 10
					},
				}],
			}
		},
		onLoad() {

		},
		watch: {
			current(val) {
				this.init()
			}
		},
		onShow() {
			try {
				if (uni.getStorageSync('user_info')) {
					let {
						isMatchmaker
					} = uni.getStorageSync('user_info')
					this.isMatchmaker = isMatchmaker
				} else {}
			} catch (e) {
				//TODO handle the exception
			}
			this.get_ActivityList()
		},
		methods: {
			delate_active(item) {
				uni.showLoading({
					title: '删除中'
				});
				let data = {
					id: item.id
				}
				delActivity(data, {
					custom: {
						auth: false,
						toast: false,
						catch: false
					}
				}).then((result) => {
					uni.$u.toast(item.name + '活动删除成功')
					this.init()
				}).catch((err) => {

				})
			},
			result(time, mode) {
				const timeFormat = uni.$u.timeFormat,
					toast = uni.$u.toast
				if (time == undefined || time == '') {
					return ''
				}
				switch (mode) {
					case 'datetime':
						return timeFormat(time, 'yyyy-mm-dd hh:MM')
					case 'date':
						return timeFormat(time, 'yyyy-mm-dd')
					case 'year-month':
						return timeFormat(time, 'yyyy-mm')
					case 'time':
						return time
					default:
						return ''
				}
			},
			onReachBottoms(e) {
				let {
					formData,
					count,
					array
				} = this.tab_list[this.current]
				let count1 = Number(count)
				let perPage = Number(formData.perPage)
				let page = Number(formData.page)
				if (count1 <= (page * perPage)) return;
				if (this.current == 0) {
					this.get_ActivityList()
				} else if (this.current == 1) {
					this.ge_tCaseList()
				}
			},
			get_srcs(it) {
				return JSON.parse(it)

			},
			swipeIndex(e) {
				this.current = e.detail.current
			},
			look_active(item) {
				uni.navigateTo({
					url: '/pagesB/sendActive/index?id=' + item.id
				})
			},
			send_case() {
				uni.navigateTo({
					url: '/pagesB/send_case/index'
				})
			},
			click(item) {
				this.current = item.index
			},
			init() {
				this.tab_list[this.current].array = []
				this.tab_list[this.current].count = 0
				this.tab_list[this.current].formData.page = 1;
				if (this.current == 0) {
					this.get_ActivityList()
				} else if (this.current == 1) {
					this.ge_tCaseList()
				}
			},
			init_info() {
				this.tab_list[this.current].array = []
				this.tab_list[this.current].count = 0
				this.tab_list[this.current].formData.page = 1;
				// console.log('1111')
				// console.log(this.tab_list[this.current]['formData']['page'])
				// this.$set(this.tab_list[this.current]['formData']['page'],this.tab_list[this.current]['formData']['page'], 1)
				this.ge_tCaseList()
			},
			ge_tCaseList() {
				let {
					formData,
					count,
					array
				} = this.tab_list[this.current]
				let data = {
					params: formData
				}
				getCaseList(data, {
					custom: {
						auth: false,
						toast: false,
						catch: false
					}
				}).then((result) => {

					this.tab_list[this.current].array = [...array, ...result.list]
					this.tab_list[this.current].count = result.count
					this.tab_list[this.current].formData.page++;
				}).catch((err) => {

				})
			},
			get_ActivityList() {
				let {
					formData,
					count,
					array
				} = this.tab_list[this.current]
				let data = {
					params: formData

				}
				getActivityList(data, {
					custom: {
						auth: false,
						toast: false,
						catch: false
					}
				}).then((result) => {
					this.tab_list[this.current].array = [...array, ...result.list]
					this.tab_list[this.current].count = result.count
					this.tab_list[this.current].formData.page++;

				}).catch((err) => {

				})
			},
			delate(i) {
				uni.showLoading({
					title: '删除中'
				});
				let data = {
					id: i.id
				}
				delCase(data, {
					custom: {
						auth: false,
						toast: false,
						catch: false
					}
				}).then((result) => {
					uni.$u.toast('删除成功')
					this.init()

				}).catch((err) => {
					uni.hideLoading();
				})
			},
			send_activity() {
				uni.navigateTo({
					url: '/pagesB/sendActive/index'
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.pages {
		height: calc(100vh - 50px - env(safe-area-inset-bottom));
		overflow: hidden;

		.activity {
			height: 290rpx;
			background-repeat: no-repeat;
			background-size: cover;
			align-items: center;
			padding: 30rpx 32rpx 0 32rpx;
			box-sizing: border-box;
			background-position: left top;

			image {
				width: 110rpx;
			}

			text {
				color: #fff;
			}

			.moment_text {
				padding: 13rpx 42rpx 17rpx;
				box-sizing: border-box;

				text {
					&:first-child {
						color: #fff;
						font-size: 32rpx;
					}

					&:last-child {
						font-size: 26rpx;
						color: #A5A5A5;
					}
				}
			}

			.heard_btn {
				width: 160rpx;
				height: 66rpx;
				line-height: 66rpx;
				text-align: center;
				border-radius: 33rpx;
				border: 2rpx solid #F5F6F8;

				&:first-child {
					margin-bottom: 24rpx;
				}

				text {
					font-size: 26rpx;
					font-weight: 400;
					display: block;
				}
			}
		}

		.content {
			padding: 0 24rpx;
			background: #F5F6F8;
			border-radius: 30rpx 30rpx 0px 0px;
			box-sizing: border-box;
			overflow: hidden;
			margin-top: -20rpx;
			flex: 1;

			.scroll-view-height {
				border-radius: 20rpx;
				overflow: hidden;
			}

			.scroll-view-height {
				height: 100%;
				/* 页面高度减去包含状态栏、标题、tab组件的高度 */
				// height: calc(100vh - var(--status-bar-height) - 500rpx);
			}

			/deep/ .u-tabs__wrapper__nav__item {
				flex: 1;
			}

			/deep/ .u-tabs__wrapper__nav__item {
				box-sizing: border-box;
			}

			/deep/ .u-tabs__wrapper__nav__item__text {
				font-weight: bold;
				font-size: 28rpx;
			}


			.main {
				// background-color: #fff;
				margin-bottom: 24rpx;
				border-radius: 20rpx;
				flex: 1;
				// &:last-child{
				// 	margin-bottom: 0;
				// }

				.activity_item {
					margin-bottom: 24rpx;
					background-color: #fff;
					overflow: hidden;
					border-radius: 20rpx;

					&:last-child {
						margin-bottom: 0;
					}

					.activity_image {
						width: 100%;
						height: 270rpx;
					}

					.activity_item_bottom {
						padding: 24rpx 32rpx 31rpx;
						box-sizing: border-box;
						height: 177rpx;

						.title {
							// padding:24rpx 0;
							box-sizing: border-box;

							text {
								font-size: 34rpx;
								font-weight: bold;
							}
						}

						.participation_warp {
							align-items: center;
							height: 68rpx;

							.participation_warp_left {
								height: 100%;

								text {
									display: block;
									line-height: 40rpx;
									font-size: 26rpx;
								}
							}

							text {
								font-size: 24rpx;
								font-family: Microsoft YaHei;
								font-weight: 400;
							}

							.btn {
								width: 160rpx;
								height: 68rpx;
								align-items: center;

								&.participation {
									background: #FF7612;
								}

								&.finish {
									background: #A0A0A0;
								}

								text {
									color: #FFFFFF;
									font-size: 26rpx;
								}
							}
						}
					}

				}

				.case_item {
					padding: 32rpx 32rpx 33rpx;
					box-sizing: border-box;
					background: #fff;
					margin-bottom: 20rpx;
					overflow: hidden;
					border-radius: 20rpx;

					.delate {
						width: 30rpx;
						height: 30rpx;

						&:first-child {
							margin-right: 20rpx;
						}
					}
				}

				.heard {
					width: 80rpx;
					height: 80rpx;
					margin-right: 24rpx;
					border-radius: 50%;
				}

				.moment_title {
					text {
						&:first-child {
							font-size: 30rpx;
							color: #111111
						}

						&:last-child {
							font-size: 26rpx;
							color: #858585;
						}
					}
				}

				text {
					line-height: 50rpx;
					font-weight: 400;
					color: #111111;
					font-size: 30rpx;
				}
			}
		}

		.photos {
			/deep/ .u-album__row__wrapper {
				border-radius: 20rpx;
				overflow: hidden;
				width: 205rpx !important;
				height: 205rpx !important;

				image {
					width: 100% !important;
					height: 100% !important;
				}
			}
		}
	}
</style>